<template>
	<view id="search">

	<view style="padding:20rpx">
		<u-search focus=true @search="getSearchContent(true)" @custom="getSearchContent(true)" font-size="28" :clearabled="true" placeholder="请输入菜名" v-model="keyWord"></u-search>
	</view>		
		<view>
			<view class="list" v-for="(item, index) in list" :key="index" @click="navigateToDetail(item.id)">
				<view class="img">
					<image :src="item.pic"></image>
				</view>
				
				<view class="content">
					<view class="name">
						{{item.name}}
					</view>
					<view class="tag u-line-1">
						{{item.tag}}
					</view>
					<view class="time">
						{{item.cookingtime}}
					</view>
					
				</view>
			</view>
			<u-loadmore :status="status" :load-text="loadText"  @loadmore="getSearchContent"/>
		</view>
		
		<view v-show="noData" style="text-align: center;">
			<u-empty text="没有找到菜谱..." mode="search"></u-empty>
		</view>
		
	</view>
</template>

<script>
	const baseUrl = "https://way.jd.com/jisuapi/";
	const myKey = "d841f29c61d4b1178380910774222055";
	export default {
		data() {
			return {
				list: [
					
				],
				keyWord: "",
				
				status: 'loadmore',
				page: 0,
				loadText: {
					loadmore: '',
					loading: '努力加载中...',
					nomore: '没有数据'
				},
				noData: false,
			}
		},
		
		onReachBottom() {
			this.getSearchContent();
		},
		
		methods:{
			/**
			 * 搜索内容
			 */
			getSearchContent(flag) {
				let that = this;
				if(flag) that.list = [];
				that.noData = false
				that.status = 'loading';
				uni.request({
					url: baseUrl+"search?appkey="+myKey+"&start="+that.page*20+"&num="+(that.page*20+20)+"&keyword="+that.keyWord,
					method:'get',
					success(res) {
						console.log(res.data)
						if(res.data.result){
							let list = res.data.result.result;
							
							console.log("res.data.code",res.data)
							
							if(that.list.length>=list.total || res.data.result.status!==0) {
								
								setTimeout(()=>{
									
									if(res.data.result.status!==0) {
										that.noData = true
										that.status = 'loadmore'
									}else{
										that.status = 'nomore'
									}
								},1000)
								
								return ;
							}
							// if(that.status=='loading') return;
							
							
							that.page = ++ that.page;
							setTimeout(() => {
								that.list = that.list.concat(list.list);
								// that.status = 'loading';
								that.status = 'loadmore';
							}, 500)
							
							
						}else{
							that.status = 'nomore';
						}
					}
				})
			},
			
			
			/**
			 * @param {Object} id
			 * 到详情
			 */
			navigateToDetail(id) {
				uni.navigateTo({
					url: "/cook/detail/index?id="+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	#search{
		padding:30rpx;
		background-color: #f7f7f7;
		
		.list{
			width: 100%;
			display: flex;
			flex-direction: row;
			background-color: #fff;
			padding:20rpx 0;
			margin-top: 20rpx;
			.img{
				padding:0 20rpx;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
			
			.content{
				// width: 100%;
				width: calc(100% -  160rpx);
				.name{
					font-weight: bold;
					padding:10rpx 0;
				}
				.time{
					color: #999;
					font-size: 22rpx;
				}
				
				.tag{
					width: 100%;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
